<template>
  <infinite-loading @infinite="infiniteHandler">
    <div slot="spinner">
加载中...
</div>
    <div slot="no-more">
应该是没有数据啦
</div>
    <div slot="no-results">
没有数据
</div>
  </infinite-loading>
</template>

<script lang="ts">
/**
 * 上拉加载
 */
import InfiniteLoading from 'vue-infinite-loading'
import { Vue, Component } from 'vue-property-decorator'

@Component({
  name: 'ComGlobalLoadMore',
  components: {
    InfiniteLoading
  }
})
export default class ComGlobalLoadMore extends Vue {
  loadModel: any = null

  /**
   * 加载更多
   */
  infiniteHandler ($state:any) {
    this.loadModel = $state
    this.$emit('loadMore')
  }

  /**
   * 加载完
   */
  loaded () {
    this.loadModel.loaded()
  }

  /**
   * 没有更多数据
   */
  complete () {
    this.loadModel.complete()
  }

  reset () {
    this.loadModel.reset()
  }
}
</script>

<style lang="less" scoped>
.com-global-load-more {
  height: 60px;
  font-size: 16px;
  font-family: PingFangSC-Regular;
  color: rgba(159, 163, 176, 1);
  > .text {
    flex: 0 1 auto;
  }
  > .line {
    height: 1px;
    background-color: #ddd;
    margin: 0 20px;
    flex: 1 0 auto;
  }
}
</style>
